<script lang="ts" setup>
  import { Ref, ref } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import Menu from '@sscd/menu';
  import Space from '@sscd/space';
  import Dropdown from '@sscd/dropdown';
  const loading1 = ref(false);
  const loading2 = ref(false);
  const enterLoading = (loading: Ref<boolean>) => {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 6000);
  };
  const enterLoading1 = () => enterLoading(loading1);
  const enterLoading2 = () => enterLoading(loading2);
</script>

<template>
  <div class="demo">
    <div class="demo-title">加载中状态</div>
    <div class="demo-content">
      <Space direction="vertical">
        <Dropdown.Button type="primary" loading>
          <template #overlay>
            <Menu>
              <Menu.Item key="1">Submit and continue</Menu.Item>
            </Menu>
          </template>
          Submit
        </Dropdown.Button>
        <Dropdown.Button type="primary" size="small" loading>
          <template #overlay>
            <Menu>
              <Menu.Item key="1">Submit and continue</Menu.Item>
            </Menu>
          </template>
          Submit
        </Dropdown.Button>
        <Dropdown.Button type="primary" :loading="loading1" @click="enterLoading1">
          <template #overlay>
            <Menu>
              <Menu.Item key="1">Submit and continue</Menu.Item>
            </Menu>
          </template>
          Submit
        </Dropdown.Button>
        <Dropdown.Button :loading="loading2" @click="enterLoading2">
          Submit
          <template #overlay>
            <Menu>
              <Menu.Item key="1">Submit and continue</Menu.Item>
            </Menu>
          </template>
          <template #icon><DownOutlined /></template>
        </Dropdown.Button>
      </Space>
    </div>
  </div>
</template>
